<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/hanzimu.css">
  <title>22003170129韩梓慕</title>
</head>

<body>
  <header>
    <nav class="han-head">
        <div class="han-top">
          <div id="han-logo"><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E9%A1%B9%E7%9B%AE%E6%95%B4%E4%BD%93/index.html"></a></div>
          <!-- 顶部导航栏 -->
          <ul class="han-list">
              <li><a href="#" class="han-item active">发现音乐</a></li>
              <li><a href="#">我的音乐</a></li>
              <li><a href="#">关注</a></li>
              <li><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E4%B8%89%E7%BA%A7%E9%A1%B9%E7%9B%AE/fifth.html">商城</a></li>
              <li><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E4%B8%89%E7%BA%A7%E9%A1%B9%E7%9B%AE/sixth.html">音乐人</a></li>
              <li><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E4%B8%89%E7%BA%A7%E9%A1%B9%E7%9B%AE/fourth.html">个人设置</a></li>
              <li class="han-hot"></li>
          </ul>
          <!-- 右侧搜索框以及用户登录区域 -->
          <ul class="han-right-list">
            <li class="han-search-wrap"><input type="search" placeholder="音乐/视频/电台/用户"></li>
            <li><a href="#">创作者中心</a></li>
            <li><a href="#">登录</a></li>
          </ul>
        </div>
    </nav>

    <nav class="han-middle-nav">
        <div class="han-inner">
            <ul>
            <li><a href="file:///d:/personal%20D/%E5%AD%A6%E4%B9%A0/web%20design/%E4%B8%89%E7%BA%A7%E9%A1%B9%E7%9B%AE/second.html">推荐歌单</a></li>
            <li><a href="#">排行榜</a></li>
            <li><a href="">云推歌</a></li>
            <li><a href="#">主播电台</a></li>
            <li><a href="#">歌手</a></li>
            <li><a href="#">新碟上架</a></li>
            </ul>
        </div>
    </nav>
</header>
  
  <div class="han-shop-top">
    <h2>商品分类</h2>
    <ul class="han-shop-type">
      <div>
        <li><a href="#">IP周边</a></li>
        <li><a href="#">热销爆品</a></li>
        <li><a href="#">数码影音</a></li>
        <li><a href="#">数字专辑</a></li>
      </div>
      <div>
        <img src="./img/IP.jpg" alt="">
        <img src="./img/ear.jpg" alt="">
        <img src="./img/box.jpg" alt=""> 
        <img src="./img/album.jpg" alt="">
      </div>
    </ul>
    

    <h2><a href="">热门商品</a></h2>
    <ul class="han-product-list">


    </ul>
    
    <h2>购物车</h2>
    <div class="han-cart-tip">
      <p>您的购物车中有 <span id="cart-item-count">0</span> 件商品，总价为 <span id="cart-total-price">￥0</span>。</p>
      <a href="#">查看购物车</a>
    </div>
  </div>
  
  <!-- 页面底部 -->
  <footer>
    <p>版权所有 &copy; 网易云商城</p>
  </footer>


  <script>
      var uls=document.querySelector(".han-product-list");
      var json=[{"pic":"./img/cup.jpg","h3":"音乐人定制马克杯","first":"材质：陶瓷","second":"容量：320ml~350ml","price":"￥59","button":"加入购物车","onclick":"('商品1', 79)"},
                {"pic":"./img/speaker.jpg","h3":"蓝牙音箱一体式黑胶唱机","first":"产品型号：TT245","second":"灵敏度：800mFS（蓝牙）","price":"￥1699","button":"加入购物车","onclick":"('商品2', 1699)"},
                {"pic":"./img/Tshirt.jpg","h3":"官方周边主题T恤","first":"面料：100%纯棉","second":"颜色：黑色","price":"￥168","button":"加入购物车","onclick":"('商品3', 168)"}
              ];

            function addRow(row){
            var element=document.createElement("ul");
            var es6_hang=`<div class="han-product-item"><img src="${row.pic}"><div class="han-product-details"><h3>${row.h3}</h3><p class="first">${row.first}</p>
          <p class="second">${row.second}</p><p class="price">${row.price}</p><button onclick="addToCart${row.onclick}">${row.button}</button></div></div>`;
            element.innerHTML=es6_hang; 
            uls.appendChild(element);  
        }
        for(var i=0;i<json.length;i++){
              addRow(json[i]);  //添加json里的数据
            }

    // 模拟购物车数据
    let cart = {
        items: [],
        totalPrice: 0,
        itemCount: 0
    };

    // 添加商品到购物车函数
    function addToCart(productName, price) 
    {
        cart.items.push({ name: productName, price: price });
        cart.totalPrice += price;
        cart.itemCount++;
        // 更新购物车提示信息
        var counts = document.getElementById('cart-item-count')
        counts.textContent = cart.itemCount;
        var totals = document.getElementById('cart-total-price')
        totals.textContent = '￥' + cart.totalPrice;
    }
  </script>
</body>
</html>